<template>
	
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="display: flex;flex-direction: row;">
			<u-avatar :src="$url + icon" mode="square" size="90" class="tx"></u-avatar>
			<view class="tx_view">心愿清单</view>
		</view>
		<view class="title">倾听陌生人的愿望</view>
		<view class="text1">心愿时而像喜欢躲藏的小孩，时而像文静的孩子，站在原地不动，似乎等待着我。</view>
		<view class="content_img">
			<image src="../../../static/images/desire/xy2.png" ></image>
			<image src="../../../static/images/desire/xy2.png" ></image>
			<image src="../../../static/images/desire/xy2.png" ></image>
		</view>
		<view class="text2">戳破愿望的七彩泡泡即可查看陌生人的愿望</view>
		<view class="custom-style">写心愿</view>
	</view>
</template>

<script>
	var bitmap = null;
	export default {
		data() {
			return {
				icon:uni.getStorageSync("icon"),
				title: '首页',
			}
		},
		onShow() {
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function() {
					icon.show();
				}, 100)
			}
		},
		onLoad() {
			bitmap = new plus.nativeObj.Bitmap('bmp0');
			bitmap.loadBase64Data(
				'',
				function() {},
				function(e) {});
			this.createtab();
		},
		methods: {
			createtab: function() {
				// 设置水平居中位置
				var leftPos = Math.ceil((plus.screen.resolutionWidth - 60) / 2);
				var view = new plus.nativeObj.View('icon', {
					bottom: '30px',
					left: leftPos + 'px',
					width: '60px',
					height: '60px'
				});
				view.drawBitmap(bitmap, {
					tag: 'font',
					id: 'icon',
					src: '/static/images/navigation/app-tabber.png',
					position: {
						top: '0px',
						left: '5px',
						width: '80px',
						height: '100%'
					}
				});
				view.addEventListener("click", function(e) {
					uni.navigateTo({
						url: '/pages/index/publish'
					})
				}, false);
				view.show();
			}
		}

	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
		
	}
	
	.tx{
		margin-top: 10rpx;
		margin-left: 40rpx;
	}
	.tx_view{
		font-size: 36rpx;
		margin-top: 30rpx;
		margin-left: 440rpx;
	} 
	.title{
		margin-top: 190rpx;
		text-align: center;
		font-size: 46rpx;
		font-family: my-font;
	}
	.text1{
		margin: 0 auto;
		width: 530rpx;
		margin-top: 35rpx;
		font-size: 28rpx;
		color: #9A9A9A;
		
	}
	.text2{
		margin: 0 auto;
		width: 360rpx;
		margin-top: 620rpx;
		font-size: 28rpx;
		color: #9A9A9A;
		
	}
	.content_img{
		top: 140rpx;
		position: relative;
	}
	.content_img image:first-child{
		position: absolute;
		width: 300rpx;
		height: 300rpx;
		left: 60rpx;
	}
	.content_img image:nth-child(2){
		position: absolute;
		width: 300rpx;
		height: 300rpx;
		right: 60rpx;
	}
	.content_img image:nth-child(3){
		position: absolute;
		width: 470rpx;
		height: 470rpx;
		top: -50rpx;
		left: 140rpx;
	}
	.custom-style {
		margin: 40rpx auto;
		padding-top: 18rpx;
		background-color: white;
		color: #9A9A9A;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5); 
		width: 50%;
		height: 80rpx;
		border-radius: 60rpx;
	}
	
</style>

